import { defineComponent, onMounted, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import useNavigator from "@/hooks/useNavigator";
import styles from "./statisticalManagementPage.module.less";
import * as echarts from "echarts";
import ZJ from "@/common/China/ZJ.json";
import ningbo from "@/common/China/zhejiang/ningbo.json";
import wenzhou from "@/common/China/zhejiang/wenzhou.json";
import hangzhou from "@/common/China/zhejiang/hangzhou.json";
import {$statistic_index,$statistic_indexArea} from "@/api/statistic/statistic";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const payRef = ref(null as any);
    const lineRef = ref(null as any);
    const ageRef = ref(null as any);
    const channelRef = ref(null as any);
    const state = reactive({
      name:"",
      people:"",
      money:"",
      cityCount:"",
      cityMoney:"",
      titleSize:0,
      isBoolBtn:false,
      allInsuredFee:0,
      allCount:0,
      cityList:[
        {
          name:"宁波市",
          count:1000,
        },
        {
          name:"杭州市",
          count:1000,
        },
        {
          name:"温州市",
          count:1000,
        },
        {
          name:"台州市",
          count:1000,
        },
        {
          name:"绍兴市",
          count:1000,
        },
        {
          name:"金华市",
          count:1000,
        },
        {
          name:"衢州市",
          count:1000,
        },
        {
          name:"湖州市",
          count:1000,
        },
        {
          name:"嘉兴市",
          count:1000,
        },
        {
          name:"舟山市",
          count:1000,
        },
        {
          name:"丽水市",
          count:1000,
        },
      ],
      zj_list:{
        宁波市:{
           id:948
        },
        杭州市:{
          id:934
        },
        温州市:{
         id:960
        },
        嘉兴市:{
          id:972
        },
        湖州市:{
          id:980
        },
        绍兴市:{
          id:986
        },
        金华市:{
          id:993
        },
        衢州市:{
          id:1003
        },
        舟山市:{
          id:1010
        }, 
        台州市:{
          id:1015
        },
        丽水市:{
          id:1025
        }
      },
      list:{
        杭州市:{
          peopleNum:100,
          money:1001,
        },
        宁波市:{
          peopleNum:1020,
          money:1000,
        },
        温州市:{
          peopleNum:1040,
          money:10003,
        },
        嘉兴市:{
          peopleNum:100,
          money:10040,
        },
        湖州市:{
          peopleNum:100,
          money:10200,
        },
        绍兴市:{
          peopleNum:100,
          money:10300,
        },
        金华市:{
          peopleNum:100,
          money:10050,
        },
        衢州市:{
          peopleNum:100,
          money:100340,
        },
        舟山市:{
          peopleNum:100,
          money:10030,
        },
        台州市:{
          peopleNum:100,
          money:1000,
        },
        丽水市:{
          peopleNum:100,
          money:15000,
        },
      },
      headlist: [
        {
          name: "当日低保参保人数",
          number:0,
          proportion: "10%",
          title: "比昨日",
        },
        {
          name: "当日总参保人数",
          number: 1000000,
          proportion: "10%",
          title: "比昨日",
        },
        {
          name: "累计低保参保人数",
          number: 1000000,
          proportion: "10%",
          title: "比昨日",
        },
        {
          name: "累计总参保人数",
          number: 1000000,
          proportion: "10%",
          title: "比昨日",
        },
      ],
      ageStatistics:[],
      allchannelStatistics:[],
    } as any);
    const LineChart = (ref:any, title:any) => {
      if (ref.value != null) {
        var chart = echarts.init(ref.value);
        var option = {
          title: {
            text:title,
            left:"left"
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: 'vertical',
            bottom:"bottom",
          },
          series:[
            {
               name:title,
               type:'pie',
               radius:'80%',
               data:state.ageStatistics,
               emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
       
        };
        console.log("年龄")
        option && chart.setOption(option);
      }
    };
    // var chan:any;
    const channelChart = (ref: any, title: any) => {
      if (ref.value != null) {
        // if(chan)
        // {
        //   chan.dispose();
        // }
        var chan = echarts.init(ref.value);
        var option = {
          title: {
            text: title,
            left:"left"
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: 'vertical',
            bottom:"bottom",
          },
          series:[
            {
               name:title,
               type:'pie',
               radius:'80%',
               data:state.allchannelStatistics,
               emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
       
        };
        option && chan.setOption(option);
      }
    };
    var myChart:any
     const mapChart = () => {
      if (lineRef.value) {
        if(myChart)
        {
          myChart.dispose();
        }
        myChart = echarts.init(lineRef.value);
        echarts.registerMap("ZJ", ZJ as any);
        var option = {
          title:{
              text:"浙江省统计图"
          },
          geo:{
            name: "浙江省地图",
            type: "map",
            map: "ZJ",
            zoom:1.23,
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                areaColor: "rgba(0,0,0,0.1)",
                borderColor: "#ccc",
                // borderWidth: 0.5,
              },
              emphasis: {
                color:"#999",
                //areaColor: "#1890ff",
                borderColor: "#ccc",
                borderWidth: 0,
                shadowBlur:5,
                shadowOffsetY: 0,
                shadowOffsetX: 0,
                shadowColor: "raba(0,0,0,0.5)",
              },
             
            },
          },
          series:{
            name: "浙江省地图",
            type: "map",
            map: "ZJ",
            zoom:1.23,
            label: {
              normal:{
                show: true,
                fontSize:14,
                // color:"rgb(255,255,255)"
              },
              emphasis:{
                show: true,
                fontSize:14,
                color:"rgb(255,255,255)"
              }
            },
            itemStyle: {
              normal: {
                // color:"#1890ff",
                // areaColor: "rgba(246,248,249,1)",
                // borderColor: "#ccc",
                // borderWidth: 0.5,
              },
              emphasis: {
                //color:"#999",
                areaColor: "#5470c6",
                // borderColor: "#ccc",
                // borderWidth: 0,
                // shadowBlur:5,
                // shadowOffsetY: 0,
                // shadowOffsetX: 0,
                // shadowColor: "raba(0,0,0,0.5)",
              },
              
            },
          
           
          },
          
        };
        myChart.setOption(option);
        window.addEventListener("resize",()=>{
            if(myChart)
            {
               myChart.resize();
            }
        })
        myChart.on("click",(params:any)=>{
          console.log("点击")
           $statistic_indexArea({city_id:state.zj_list[params.name].id}).then((res:any)=>{
            state.isBoolBtn = true;
              state.cityCount = res?.data?.count;
              state.cityMoney = res?.data?.sumPremium;
              state.titleSize = (String(state.cityCount).length > String(state.cityMoney).length) ? String(state.cityCount).length * 10 : String(state.cityMoney).length *10;
           })
        })
        // myChart.on("mousemove",(params:any)=>{

        //   if(state.name != params.name && params.seriesName == "浙江省地图")
        //   {
        //     //  state.name = params.name;
        //     //  state.people = state.list[params.name].peopleNum;
        //     //  state.money = state.list[params.name].money;
        //     state.isBoolBtn = false;
        //     state.cityCount = "";
        //     state.cityMoney = "";
        //      state.titleSize = (String(state.people).length > String(state.money).length) ? String(state.people).length * 10 : String(state.money).length *10;
               
        //   }
        // })
        myChart.on("mouseout",(params:any)=>{
        })
      }
    };
    // const cityMapChart = (e:any,name:any)=>{
    //   if (lineRef.value) {
    //     state.isBoolBtn = true;
    //     chart = echarts.init(lineRef.value);
    //     echarts.registerMap("city", e);
    //     var option = {
    //       title:{
    //           text:name
    //       },
    //       geo:{
    //         name:name,
    //         type: "map",
    //         map: "city",
    //         zoom:1.23,
    //         label: {
    //           show: true,
    //         },
    //         itemStyle: {
    //           // normal: {
    //           //   areaColor: "rgba(0,0,0,0.1)",
    //           //   borderColor: "#ccc",
    //           //   // borderWidth: 0.5,
    //           // },
    //           emphasis: {
    //             areaColor: "yellow",
    //             borderColor: "#ccc",
    //             borderWidth: 0,
    //             shadowBlur:5,
    //             shadowOffsetY: 0,
    //             shadowOffsetX: 0,
    //             shadowColor: "raba(0,0,0,0.5)",
    //           },
    //         },
    //       },
    //       series:{
    //         name:name,
    //         type: "map",
    //         map: "city",
    //         zoom:1.23,
    //         label: {
    //           show: true,
    //         },
    //         itemStyle: {
    //           // normal: {
    //           //   areaColor: "rgba(0,0,0,0.1)",
    //           //   borderColor: "#ccc",
    //           //   // borderWidth: 0.5,
    //           // },
    //           emphasis: {
    //             areaColor: "yellow",
    //             borderColor: "#ccc",
    //             borderWidth: 0,
    //             shadowBlur:5,
    //             shadowOffsetY: 0,
    //             shadowOffsetX: 0,
    //             shadowColor: "raba(0,0,0,0.5)",
    //           },
    //         },
    //       },
    //     };
    //     chart.setOption(option);
       
    //     chart.on("click",(params:any)=>{
    //        console.log(params)
    //     })
    //   }
    // }
    // const dealWithData = () => {
    //   var geoCoordMap: any = {
    //     杭州: [120.19, 30.26],
    //     宁波: [121.56, 29.86],
    //     温州: [120.65, 28.01],
    //     嘉兴: [120.76, 30.77],
    //     湖州: [120.1, 30.86],
    //     绍兴: [120.58, 30.01],
    //     金华: [119.64, 29.12],
    //     衢州: [118.88, 28.97],
    //     舟山: [122.207216, 29.985295],
    //     台州: [121.420757, 28.656386],
    //     丽水: [119.92, 28.45],
    //   };
    //   var data = [
    //     {
    //       name: "杭州",
    //       value: 84,
    //     },
    //     {
    //       name: "宁波",
    //       value: 33,
    //     },
    //     {
    //       name: "温州",
    //       value: 95,
    //     },
    //     {
    //       name: "嘉兴",
    //       value: 51,
    //     },
    //     {
    //       name: "湖州",
    //       value: 32,
    //     },
    //     {
    //       name: "绍兴",
    //       value: 63,
    //     },
    //     {
    //       name: "金华",
    //       value: 157,
    //     },
    //     {
    //       name: "衢州",
    //       value: 177,
    //     },
    //     {
    //       name: "舟山",
    //       value: 12,
    //     },
    //     {
    //       name: "台州",
    //       value: 67,
    //     },
    //     {
    //       name: "丽水",
    //       value: 133,
    //     },
    //   ];
    //   var res = [];
    //   for (var i = 0; i < data.length; i++) {
    //     var geoCoord = geoCoordMap[data[i].name];
    //     if (geoCoord) {
    //       res.push({
    //         name: data[i].name,
    //         value: geoCoord,
    //         cityValue: data[i].value,
    //       });
    //     }
    //   }
    //   return res;
    // };
    const HeadContent = () => (
      <div class={styles.headBox}>
        {state.headlist.map((item: any, index: any) => {
          return (
            <div class={[styles.headCardBox]}>
              <div
                class={[
                  styles["headCard_leftBox"],
                  index < 2
                    ? styles.headCardBlue
                    : index < 4
                    ? styles.headCardOrgen
                    : styles.headCardRed,
                ]}
              ></div>
              <div class={styles["headCard_rightBox"]}>
                <div class={styles.head}>{item.name}</div>
                <div class={styles["head_contentBox"]}>
                  <div class={styles["head_number_box"]}>
                    <div class={styles["head_leftBox"]}>{item.number}</div>
                  </div>
                </div>
                {/* <div class={styles["head_rightBox"]}>
                  <div style={{ color: "red" }}>{item.proportion}</div>
                  <div class={styles["head_right_title"]}>{item.title}</div>
                </div> */}
              </div>
            </div>
          );
        })}
      </div>
    );
    const HeadScreen = ()=>(
        <div class={styles.headScreenBox}>
             <div class={styles.titleBox}>生效日期开始时间</div>
               <a-date-picker
                onChange={(e: any, string: any) => {
                }}
              />
              <div class={styles.titleEndBox}>生效日期结束时间</div>
               <a-date-picker
                onChange={(e: any, string: any) => {
                }}
              />
        </div>
    )
    const BodyContent = () => (
      <div class={styles.bodyBox}>
         <div class={styles.body_row_box}>
         
         <div ref={lineRef} class={styles["body_leftBox"]}>
        </div>
         {
            <CityTable/>
         }
        <div class={styles.body_row_laber}>
          <div class={styles.label}>累计参保人数:</div>
            <div class={styles.labelOne} style={{ '--titleSize':state.titleSize+"px"}}>
              {
                state.isBoolBtn ? state.cityCount:state.people
              }</div>
          </div>
         <div class={styles.body_row_laber}>
          <div class={styles.label}>累计参保金额:</div>
          <div class={styles.labelOne} style={{ '--titleSize': state.titleSize+"px"}}>{   
          state.isBoolBtn ? state.cityMoney:state.money}</div>
          </div>
         </div>
        <div class={styles.body_row_right_box}>
           {/* <div class={styles.body_row_top_box}>
             <div ref={ageRef} class={styles.body_row_top_box_left}></div>
             <div ref={channelRef} class={styles.body_row_top_box_right}></div>
           </div> */}
          <div  ref={ageRef} class={styles.body_row_top_box}></div>
          <div  ref={channelRef} class={styles.body_row_bottom_box}></div>
        </div>
      </div>
    );
    const CityTable = ()=>(
      <div class={styles.tableBox}>
         <div class={styles.tableRowBox}>
            <div class={styles.nameBox}>所在市</div>
            <div class={styles.countBox}>累计总参保人数</div>
         </div>
         {
            state?.cityList?.map((item:any)=>{
                return  <div class={styles.tableRowBox}>
                      <div class={styles.nameBox}>{item.name}</div>
                      <div class={styles.countBox}>{item.count}</div>
             </div>
            })
         }
      </div>
    )
    onMounted(()=>{
       $statistic_index({}).then((res:any)=>{
          state.headlist[0].number = res.data.todayInsuredCount;
          state.headlist[1].number = res.data.todayFee;
          state.headlist[2].number = res.data.currentWeekInsuredCount;
          state.headlist[3].number = res.data.currentWeekInsuredFee;
          state.allInsuredFee = res.data.allInsuredFee;
          state.allCount = res.data.allCount;
          state.ageStatistics = res.data.ageStatistics.map((item:any)=>{
               return {
                  name:item.minAge + "-" + item.maxAge,
                  value:item.statistics.count,
                }
          });
          state.allchannelStatistics = [
            {
               name:"续保",
               value:100,
            },
            {
              name:"新保",
              value:50,
            }
          ]
       }).finally(()=>{
        {mapChart()}
        {LineChart(ageRef,"年龄统计")}
        {channelChart(channelRef,"续保与新保占比统计")}
       })
    })
    
    return () => (
      <Page>
        <CardWithTitle title="统计列表">
          <div class={styles.statistical}>
            <HeadScreen/>
            <HeadContent />
            <BodyContent />
          </div>
        </CardWithTitle>
      </Page>
    );
  },
});
